<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>味觉大师</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="stylesheet" href="css/sm.min.css">
<link rel="stylesheet" href="css/sm-extend.css">
<link rel="stylesheet" href="css/ui-box.css">
<link rel="stylesheet" href="css/my.css">
<style type="text/css">
.item-login img {
	width: 3.25em;
	margin-top:0.6em; 
	margin-bottom:0.6em; 
}

.title-icon {
	margin-right: 0.6rem;
	background-color: red;
}

.more {
	float: right;
}

.descp {
	font-size: 0.65rem;
	color: gray;
}
.item-auth{
	text-align:center;
}
.item-auth img{
	width:3.75em;
	border-radius:50%;
}
</style>
</head>
<body> 
	<div class="page-group">
		<div class="page" id="page-index">
			<header class="bar bar-nav">
				<a class="icon icon-search pull-right"></a>
				<h1 class='title'>我的</h1>
			</header>
            <nav class="bar bar-tab">
                <a class="tab-item" href="./index.html" external> <span class="icon icon-home"></span> <span class="tab-label">首页</span> </a>
                <a class="tab-item" href="./restaurant.html" external> <span class="icon icon-gift"></span> <span class="tab-label">精选餐厅</span> </a>
                <a class="tab-item" href="./show.html" external> <span class="icon icon-star"></span> <span class="tab-label">秀场</span> </a>
                <a class="tab-item" href="./master.html" external> <span class="icon icon-app"></span> <span class="tab-label">大师菜谱</span> </a>
                <a class="tab-item active" href="./my.html" external> <span class="icon icon-me"></span> <span class="tab-label">我的</span> </a>
            </nav>
			<div class="content">
				<div class="list-block umar-t">
					<ul>
						<li class="item-content item-login" @click="toLogin" v-if="!isLogin">
							<div class="uinn-r">
								<img src="images/login_click.png"/>
							</div>
							<div class="item-inner">
								<div class="item-title">请点击登录</div>
							</div>
						</li>
						<li class="item-login item-auth" @click="toLogin" v-else>
							<div class="uinn-r">
								<img src="./portrait/301.jpg"/>
							</div>
							<div class="">
								<div class="item-title">{{username}}</div>
							</div>
						</li>
						<li class="item-content item-link">
							<div class="item-media">
								<i class="icon icon-star"></i>
							</div>
							<div class="item-inner">
								<div class="item-title">收藏</div>
							</div>
						</li>
						
						<li class="item-content item-link">
							<div class="item-media">
								<i class="icon icon-refresh"></i>
							</div>
							<div class="item-inner">
								<div class="item-title">历史记录</div>
							</div>
						</li>
						<li class="item-content item-link">
							<div class="item-media">
								<i class="icon icon-card"></i>
							</div>
							<div class="item-inner">
								<div class="item-title">名片</div>
							</div>
						</li>
						<li class="item-content item-link">
							<div class="item-media">
								<i class="icon icon-message"></i>
							</div>
							<div class="item-inner">
								<div class="item-title">客服</div>
							</div>
						</li>
						<li class="item-content item-link">
							<div class="item-media">
								<i class="icon icon-share"></i>
							</div>
							<div class="item-inner">
								<div class="item-title">向朋友推荐</div>
							</div>
						</li>
						<li class="item-content item-link">
							<div class="item-media">
								<i class="icon icon-settings"></i>
							</div>
							<div class="item-inner">
								<div class="item-title">设置</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>

	</div>

	<script type='text/javascript' src='js/zepto.min.js'
		charset='utf-8'></script>
	<script type='text/javascript' src='js/sm.js' charset='utf-8'></script>
	<script type='text/javascript' src='js/sm-extend.min.js'
		charset='utf-8'></script>
	<script type='text/javascript' src='js/vue.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='js/pluto.js' charset='utf-8'></script>
</body>
<script type="text/javascript">
	var rootVm=new Vue({
		el:"#page-index",
		data:{
			isLogin:false,
			username:""
		},
		ready:function(){
			
		},
		methods:{
			toLogin:function(){
				$.router.load("./login.html", true);
			}
		}
	});;
	$(document).on("pageInit", "#page-index", function(e, pageId, $page) {
		$(".item-link").click(function(){
			$.toast("开发中...");
			return false;
		});
	});
	$(document).on("pageInit", "#page-login", function(e, pageId, $page) {
		new Vue({
			el:"#"+pageId,
			data:{
				username:""
			},
			ready:function(){
				
			},
			methods:{
				login:function(){
					console.log(this.username);
					if(this.username==""){
						alert("用户名不能为空");
						return;
					}
					rootVm.username=this.username;
					rootVm.isLogin=true;
					$.router.back();
				}
			}
		});
	});
	$.init();
</script>
</html>